<template>
  <el-tabs v-model="activeTab">
    <el-tab-pane label="网格" name="1">
      <el-row>
        <el-col :span="10"><el-text>Grid Type</el-text></el-col>
        <el-col :span="12">
          <el-select style="width: 100%" v-model="globalGridAttr.type">
            <el-option :value="GRID_TYPE.DOT" label="Dot" />
            <el-option :value="GRID_TYPE.FIXED_DOT" label="Fixed Dot" />
            <el-option :value="GRID_TYPE.MESH" label="Mesh" />
            <el-option :value="GRID_TYPE.DOUBLE_MESH" label="Double Mesh" />
          </el-select>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="10"><el-text>Grid Size</el-text></el-col>
        <el-col :span="10">
          <el-slider :min="1" :max="20" :step="1" v-model="globalGridAttr.size" />
        </el-col>
        <el-col :span="2">
          <div class="result">{{ globalGridAttr.size }}</div>
        </el-col>
      </el-row>
      <div v-if="globalGridAttr.type === 'doubleMesh'">
        <el-row>
          <el-col :span="10"><el-text>Primary Color</el-text></el-col>
          <el-col :span="12">
            <el-input type="color" v-model="globalGridAttr.color" style="width: 100%" />
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="10"><el-text>Primary Thickness</el-text></el-col>
          <el-col :span="10">
            <el-slider :min="0.5" :max="10" :step="0.5" v-model="globalGridAttr.thickness" />
          </el-col>
          <el-col :span="2">
            <div class="result">{{ globalGridAttr.thickness.toFixed(1) }}</div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="10"><el-text>Secondary Color</el-text></el-col>
          <el-col :span="12">
            <el-input type="color" v-model="globalGridAttr.colorSecond" style="width: 100%" />
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="10"><el-text>Secondary Thickness</el-text></el-col>
          <el-col :span="10">
            <el-slider :min="0.5" :max="10" :step="0.5" v-model="globalGridAttr.thicknessSecond" />
          </el-col>
          <el-col :span="2">
            <div class="result">{{ globalGridAttr.thicknessSecond.toFixed(1) }}</div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="10"><el-text>Scale Factor</el-text></el-col>
          <el-col :span="10">
            <el-slider :min="1" :max="10" :step="1" v-model="globalGridAttr.factor" />
          </el-col>
          <el-col :span="2">
            <div class="result">{{ globalGridAttr.factor }}</div>
          </el-col>
        </el-row>
      </div>
      <div v-else>
        <el-row>
          <el-col :span="10"><el-text>Grid Color</el-text></el-col>
          <el-col :span="12">
            <el-input type="color" v-model="globalGridAttr.color" style="width: 100%" />
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="10"><el-text>Thickness</el-text></el-col>
          <el-col :span="10">
            <el-slider :min="0.5" :max="10" :step="0.5" v-model="globalGridAttr.thickness" />
          </el-col>
          <el-col :span="1">
            <div class="result">{{ globalGridAttr.thickness.toFixed(1) }}</div>
          </el-col>
        </el-row>
      </div>
    </el-tab-pane>

    <el-tab-pane label="背景" name="2">
      <el-row>
        <el-col :span="6"><el-text>Color</el-text></el-col>
        <el-col :span="14">
          <el-input type="color" v-model="globalGridAttr.bgColor" style="width: 100%" />
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="14" :offset="6">
          <el-checkbox v-model="globalGridAttr.showImage">Show Image</el-checkbox>
        </el-col>
      </el-row>
      <div v-if="globalGridAttr.showImage">
        <el-row>
          <el-col :span="6"><el-text>Repeat</el-text></el-col>
          <el-col :span="14">
            <el-select style="width: 100%" v-model="globalGridAttr.repeat">
              <el-option :value="REPEAT_TYPE.NO_REPEAT" label="No Repeat" />
              <el-option :value="REPEAT_TYPE.REPEAT" label="Repeat" />
              <el-option :value="REPEAT_TYPE.REPEAT_X" label="Repeat X" />
              <el-option :value="REPEAT_TYPE.REPEAT_Y" label="Repeat Y" />
              <el-option :value="REPEAT_TYPE.ROUND" label="Round" />
              <el-option :value="REPEAT_TYPE.SPACE" label="Space" />
              <el-option :value="REPEAT_TYPE.FLIPX" label="Flip X" />
              <el-option :value="REPEAT_TYPE.FLIPY" label="Flip Y" />
              <el-option :value="REPEAT_TYPE.FLIPXY" label="Flip XY" />
              <el-option :value="REPEAT_TYPE.WATERMARK" label="Watermark" />
            </el-select>
          </el-col>
        </el-row>
        <div v-if="globalGridAttr.repeat === 'watermark'">
          <el-row>
            <el-col :span="16" :offset="6" style="font-size: 12px"><el-text>Watermark Angle</el-text></el-col>
            <el-col :span="14" :offset="6">
              <el-slider :min="0" :max="360" :step="1" v-model="globalGridAttr.angle" />
            </el-col>
            <el-col :span="2">
              <div class="result">{{ globalGridAttr.angle }}</div>
            </el-col>
          </el-row>
        </div>

        <el-row>
          <el-col :span="6"><el-text>Position</el-text></el-col>
          <el-col :span="14">
            <el-select style="width: 100%" v-model="globalGridAttr.position">
              <el-option value="center" label="center" />
              <el-option value="left" label="left" />
              <el-option value="right" label="right" />
              <el-option value="top" label="top" />
              <el-option value="bottom" label="bottom" />
              <el-option value="50px 50px" label="50px 50px" />
              <el-option :value="JSON.stringify({ x: 50, y: 50 })" label="{ x: 50, y: 50 }" />
            </el-select>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6"><el-text>Size</el-text></el-col>
          <el-col :span="14">
            <el-select style="width: 100%" v-model="globalGridAttr.bgSize">
              <el-option value="auto auto" label="auto auto" />
              <el-option value="cover" label="cover" />
              <el-option value="contain" label="contain" />
              <el-option value="30px 30px" label="30px 30px" />
              <el-option value="100% 100%" label="100% 100%" />
              <el-option :value="JSON.stringify({ width: 150, height: 150 })" label="{width: 150, height: 150 }" />
            </el-select>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6"><el-text>Opacity</el-text></el-col>
          <el-col :span="12">
            <el-slider :min="0.05" :max="1" :step="0.05" v-model="globalGridAttr.opacity" />
          </el-col>
          <el-col :span="4">
            <div class="result">{{ globalGridAttr.opacity.toFixed(2) }}</div>
          </el-col>
        </el-row>
      </div>
    </el-tab-pane>
  </el-tabs>
</template>

<script lang="ts">
import { defineComponent, reactive, inject, watch, ref } from "vue";
// import FlowGraph from '@/views/graph'

import { gridOpt, backGroundOpt, gridSizeOpt } from "./method";

enum GRID_TYPE_ENUM {
  DOT = "dot",
  FIXED_DOT = "fixedDot",
  MESH = "mesh",
  DOUBLE_MESH = "doubleMesh"
}

enum REPEAT_TYPE_ENUM {
  NO_REPEAT = "no-repeat",
  REPEAT = "repeat",
  REPEAT_X = "repeat-x",
  REPEAT_Y = "repeat-y",
  ROUND = "round",
  SPACE = "space",
  FLIPX = "flipX",
  FLIPY = "flipY",
  FLIPXY = "flipXY",
  WATERMARK = "watermark"
}

export default defineComponent({
  name: "Index",
  setup() {
    const activeTab = ref("1");
    const GRID_TYPE = reactive(GRID_TYPE_ENUM);
    const REPEAT_TYPE = reactive(REPEAT_TYPE_ENUM);
    const globalGridAttr: any = inject("globalGridAttr");

    gridOpt(globalGridAttr);
    gridSizeOpt(globalGridAttr);
    backGroundOpt(globalGridAttr);

    // 监听网格变化
    watch(
      [
        () => globalGridAttr.type,
        () => globalGridAttr.color,
        () => globalGridAttr.thickness,
        () => globalGridAttr.thicknessSecond,
        () => globalGridAttr.colorSecond,
        () => globalGridAttr.factor
      ],
      () => {
        gridOpt(globalGridAttr);
      },
      {
        immediate: true,
        deep: true
      }
    );

    // 监听网格大小变化
    watch(
      [() => globalGridAttr.size],
      () => {
        gridSizeOpt(globalGridAttr);
      },
      {
        immediate: true,
        deep: true
      }
    );

    // 监听背景变化
    watch(
      [
        () => globalGridAttr.bgColor,
        () => globalGridAttr.showImage,
        () => globalGridAttr.repeat,
        () => globalGridAttr.angle,
        () => globalGridAttr.bgSize,
        () => globalGridAttr.position,
        () => globalGridAttr.opacity
      ],
      () => {
        backGroundOpt(globalGridAttr);
      },
      {
        immediate: true,
        deep: true
      }
    );

    return {
      activeTab,
      GRID_TYPE,
      REPEAT_TYPE,
      globalGridAttr
    };
  }
});
</script>

<style lang="scss" scoped></style>
